<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="el-page-header">
          <div class="el-page-header__left" @click="backUp">
            <i class="el-icon-back"></i>
            <div class="el-page-header__title">返回</div>
          </div>
          <div class="el-page-header__content" style="font-size: 15px;">调度中心在线日志查看</div>
        </div>
      </div>
      <div style="min-height: 300px">
        <el-col :span="10">
          <div class="block">
            <p style="line-height: 30px">日志文件列表</p>
            <el-tree :data="data" node-key="id" default-expand-all style="max-height: 450px;overflow-y: auto;"
                     :expand-on-click-node="false" :render-content="toRenderContent">
            </el-tree>
          </div>
        </el-col>
        <el-col :span="14">
          <div style="margin-left: 10px">
            <div style="float: left;margin-top: 10px;">
              <label>日志文件名称:</label>
              <span style="padding-left: 10px;">{{ logFileName }}</span>
            </div>
            <div style="float: right;margin-bottom: 5px;">
              <label>自动刷新:</label>
              <el-select v-model="replaceTime" placeholder="请选择" filterable @change="changeReplace"
                         style="margin-left: 10px;width: 100px">
                <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div style="float: right;margin-bottom: 5px;margin-right: 20px;">
              <label>日志显示行数:</label>
              <el-select v-model="logShowRow" placeholder="请选择" filterable @change="changeShowRow"
                         style="margin-left: 10px;width: 100px">
                <el-option v-for="item in rowList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div v-cloak>
              <el-input type="textarea" :rows="22" :disabled="true" v-model="runLog"
                        style="padding-bottom: 20px;background-color: white;"/>
            </div>
          </div>
        </el-col>
      </div>
    </el-card>
  </div>
</template>
<script>
import CRUD, {crud} from '@crud/crud'
import {downloadFile} from '@/utils/index'
import axios from 'axios'
import {Notification} from 'element-ui'

export default {
  name: 'CenterViewLogsOnline',
  mixins: [crud()],
  props: {
    centerInfo: {
      type: Object,
      default: null
    },
  },
  data() {
    return {
      data: [],
      runLog: null,
      replaceTime: 0,
      logFileName: null,
      logShowRow: 100,
      selectFileData: null,
      timer: null,
      url: null,
      rowList: [
        {
          value: 100,
          label: '100行'
        }, {
          value: 200,
          label: '200行'
        }, {
          value: 300,
          label: '300行'
        }, {
          value: 500,
          label: '500行'
        }, {
          value: 1000,
          label: '1000行'
        },
      ],
      timeList: [
        {
          value: 0,
          label: '不刷新'
        }, {
          value: 2,
          label: '2秒'
        }, {
          value: 5,
          label: '5秒'
        }, {
          value: 10,
          label: '10秒'
        }, {
          value: 15,
          label: '15秒'
        }, {
          value: 30,
          label: '30秒'
        }, {
          value: 60,
          label: '60秒'
        }
      ]
    }
  },
  created() {
    this.url = 'http://' + this.centerInfo.centerIp + ':' + this.centerInfo.centerPort;
    this.initFileLogList();
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    backUp(){
      clearInterval(this.timer)
      this.timer = null
      this.crud.goBack()
    },
    // 初始化日志文件列表
    initFileLogList() {
      const loading = this.$loading({
        lock: true,
        text: '正在获取中心日志目录，请稍等...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      axios
        .get(this.url + '/api/centerDef/getLogFilePath')
        .then(response => {
          if (response.data) {
            this.data = JSON.parse(JSON.stringify(response.data));
          }
          loading.close();
        }).catch(function (error) { // 请求失败处理
        loading.close();
        Notification.error({
          title: "获取日志文件失败: " + error.response.data.error,
          duration: 5000
        })
      });
    },
    // 展示日志文件列表tree标签下
    toRenderContent(h, {node, data, store}) {
      if (data.fileType === 'FILE') {
        return (
          < div class="custom-tree-node">
             < span>
                <i class="el-icon-document"></i>
                <span style="padding-left: 4px;">{data.fileName} < /span>
             < /span>
            < span>{data.fileSize}< /span>
            < span>{data.updateTime}< /span>
            <span>
                <el-button size="mini" type="text" on-click={() => this.lookFileLog(data)}>查看</el-button>
                <el-button size="mini" type="text" on-click={() => this.downFileLog(data)}>下载</el-button>
             </span>
          < /div>);
      } else {
        return (
          < div class="custom-tree-node">
             < span>
                <i class="el-icon-folder-opened"></i>
               <span style="padding-left: 4px;">{data.fileName} < /span>
             < /span>
          < /div>);
      }
    },
    //日志文件下载
    downFileLog(data) {
      let dataForm = {
        filePath: data.filePath,
        fileName: data.fileName
      }
      const loading = this.$loading({
        lock: true,
        text: '正在获取日志文件，请稍等...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      axios
        .post(this.url + '/api/centerDef/downLogFile', dataForm)
        .then(response => {
          downloadFile(response.data, data.fileName, 'log')
          loading.close();
        }).catch(function (error) { // 请求失败处理
          loading.close();
          Notification.error({
             title: "正在获取远程日志内容失败: " + error.response.data.message,
             duration: 5000
          })
      });
    },
    // 查询日志文件内容
    lookFileLog(data) {
      this.selectFileData = data;
      let param = {
        filePath: data.filePath,
        fileLine: this.logShowRow
      }
      this.logFileName = data.fileName;
      this.runLog = "正在获取远程日志文件内容，请稍等...";
      axios
        .post(this.url + '/api/centerDef/getLogFileInfo', param)
        .then(response => {
          if (response.data) {
            let logContent = "";
            if (response.data instanceof Array) {
              response.data.reverse().forEach(val => {
                logContent += val + '\n';
              })
            }
            this.runLog = logContent;
          }
        }).catch(function (error) { // 请求失败处理
           Notification.error({
              title: "正在获取远程日志内容失败: " + error.response.data.error,
              duration: 5000
           })
        });
    },
    // 更改自动刷新
    changeReplace() {
      if (this.logFileName != null && this.logFileName != '') {
        this.clearReflash();
        if (this.replaceTime > 0) {
          this.timer = setInterval(() => {
            this.lookFileLog(this.selectFileData)
          }, this.replaceTime * 1000);
        }
      } else {
        this.replaceTime = 0;
        this.crud.notify('请选择查看的日志文件！', CRUD.NOTIFICATION_TYPE.WARNING)
      }
    },
    // 更改显示行数
    changeShowRow() {
      if (this.logFileName != null && this.logFileName != '') {
        this.lookFileLog(this.selectFileData)
      } else {
        this.logShowRow = 100;
        this.crud.notify('请选择查看的日志文件！', CRUD.NOTIFICATION_TYPE.WARNING)
      }
    },
    // 更改刷新时间
    clearReflash() {
      if (this.timer != null) {
        clearInterval(this.timer);
      }
    },
  }
}
</script>
<style type="text/css">
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

[v-cloak] {
  display: none;
}
</style>
